<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>vue改变内容</title>
    <script src="../js/vue.js"></script>
</head>
<body>

    <div id="app">
        {{count}}
        {{result}}
        <button type="button" @click="addbtn">增加</button>
        <button type="button" @click="relsbtnfn">减少</button>

        <input type="text" v-model="mystep">


        <p v-on:mousemove="mymo">
            今天是周一!!!
            {{x}}<br>
            {{y}}<br>

            <span @mousemove.stop>停止鼠标移动事件</span>
        </p>

    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            count:0,
            mystep:1,
            x:0,
            y:0,
            result:''
        },
        methods:{
            addbtn:function () {
                var num = Number(this.mystep)
                this.count+=num
                this.result = this.count>10?'大于10':'不大于10'
            },
            relsbtnfn:function () {
                this.count-=this.mystep
            },
            mymo:function (event) {
                this.x = event.clientX,
                this.y = event.clientY
            },
            mystopmove:function (event) {
                event.stopPropagation()
            }
        }

    })
</script>
</html>